<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据库备份</title>
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap3.4.1.min.css" th:href="@{/css/lib/bootstrap3.4.1.min.css}">
    <!-- Bootstrap-table CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap-table.min.css" th:href="@{/css/lib/bootstrap-table.min.css}">
    <!-- jquery-ui CSS-->
    <link rel="stylesheet" href="../../static/css/lib/jquery-ui.min.css" th:href="@{/css/lib/jquery-ui.min.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../../static/css/table.css" th:href="@{/css/table.css}">
</head>
<body onload="init();">
<div class="panel-body" style="padding-bottom:0;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <div class="form-group" style="margin-top:15px">
                <div class="row row-gap">
                    <label class="control-label col-sm-1 label-font" for="txt_search_start_time" title="开始时间">开始时间</label>
                    <div class="col-sm-3">
                        <input type="datetime-local" class="form-control" id="txt_search_start_time">
                    </div>
                    <label class="control-label col-sm-1 label-font" for="txt_search_end_time" title="结束时间">结束时间</label>
                    <div class="col-sm-3">
                        <input type="datetime-local" class="form-control" id="txt_search_end_time">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_filter" class="btn btn-primary" onclick="filter();">过滤</button>
                        <button type="button" style="margin-left:50px" id="btn_reset_filter" class="btn btn-primary" onclick="init();">重置过滤</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default" onclick="create();">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>手动备份
        </button>
        <button id="btn_delete" type="button" class="btn btn-default" onclick="deleteAll();">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <table id="table"></table>
</div>

<!-- JavaScript files-->
<!-- jquery.js -->
<script src="../../static/js/lib/jquery.min.js" th:src="@{/js/lib/jquery.min.js}"></script>
<!-- Bootstrap.js -->
<script src="../../static/js/lib/bootstrap3.4.1.min.js" th:src="@{/js/lib/bootstrap3.4.1.min.js}"></script>
<!-- Bootstrap-table.js -->
<script src="../../static/js/lib/bootstrap-table.min.js" th:src="@{/js/lib/bootstrap-table.min.js}"></script>
<script src="../../static/js/lib/bootstrap-table-zh-CN.min.js" th:src="@{/js/lib/bootstrap-table-zh-CN.min.js}"></script>
<!-- sweetalert2.js -->
<script src="../../static/js/lib/sweetalert.min.js" th:src="@{/js/lib/sweetalert.min.js}"></script>
<script src="../../static/js/lib/es6-promise.auto.min.js" th:src="@{/js/lib/es6-promise.auto.min.js}"></script>
<!-- jquery-ui.js -->
<script src="../../static/js/lib/jquery-ui.min.js" th:src="@{/js/lib/jquery-ui.min.js}"></script>
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script>
    /** 初始化 */
    let $table = $('#table');

    // 服务器分页获取数据
    function getServerPaging(node, url, queryParams) {
        initTable(node, url, [10, 25, 50, 100, "All"], queryParams, [{
            checkbox: true
        }, {
            field: 'fileName',
            title: '数据库名称',
            width: "236px",
            formatter: stringFormatter
        }, {
            field: 'fileUrl',
            title: '备份路径',
            width: '326px',
            formatter: stringFormatter
        }, {
            field: 'createTime',
            title: '备份时间',
            width: '170px',
            formatter: dateFormatter
        }]);
    }

    // 修改提示框样式
    changeToolTip();

    // 初始化表格信息
    function init() {
        getServerPaging($table, "/db-back-up/getDbBackUps", params => {
            return { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC" };
        });
    }
</script>
<script>
    /** 功能 */
    // 过滤
    function filter() {
        let time = [$("#txt_search_start_time"), $("#txt_search_end_time")];

        // 检验用户输入时间是否有问题
        if ("" !== time[0][0].validationMessage || "" !== time[1][0].validationMessage) {
            swal("操作提示", "请填写完整的时间", "info");
            return;
        }

        // 检验用户是否输入过滤参数
        if ("" === time[0].val() && "" === time[1].val()) {
            swal("操作提示", "请填写过滤参数", "info");
            return;
        }

        getServerPaging($table, "/db-back-up/getDbBackUps", params => {
            let result = { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC", startTime: time[0].val(), endTime: time[1].val() };
            removeEmptyField(result);
            return result;
        });
    }

    // 删除
    function deleteAll() {
        let filNames = $table.bootstrapTable('getSelections');
        if (0 === filNames.length) {
            swal("操作提示", "请选择对应的记录", "info");
            return;
        }

        dialog("确定删除吗？", () => {
            parameterPostRequest("/db-back-up/deleteByFileNames", filNames.map(item => item.fileName), () => {
                swal("删除", "文件删除成功", "success");
                init();
            });
        });
    }

    // 手动备份
    function create() {
        noParameterPostRequest("/db-back-up/insert", result => {
            if ("" === result.module) {
                swal("操作提示", "备份未成功，可能是未设置正确的mysql环境变量。", "info");
            } else {
                swal("备份成功", "路径：" + result.module, "success");
                init();
            }
        });
    }
</script>
</body>
</html>